<!--
/**
* Author: linchun
* Date: 2022-08-02 15:53
* Desc: MobileInput 手机号输入
*/
-->
<template>
  <view class="mobile-input">
    <zm-input
      type="tel"
      :maxlength="11"
      placeholder="请输入手机号"
      class="mobile-input"
      :input-align="'right'"
      :custom-style="{
        padding: '33rpx 20rpx'
      }"
      @clear="handleClear"
      v-model="Value"
    >
      <template slot="prefix">
        <text
          style="
            padding-right: 20rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #333;
          "
        >
          手机号
        </text>
      </template>
    </zm-input>
  </view>
</template>

<script>
  import ZmInput from '@/commons/ZmInput/index.vue'
  export default {
    name: 'MobileInput',
    data() {
      return {}
    },
    components: {
      ZmInput
    },
    props: {
      value: String
    },
    created() {},
    computed: {
      Value: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    methods: {
      // 初始化方法
      init() {},
      handleClear() {
        this.$emit('input', false)
      }
    }
  }
</script>
<style lang="scss" scoped></style>
